<template>
  <n-space style="margin-left: 5%; margin-top: 30px;">
    <n-input placeholder="搜索竞赛号" style="width: 500px;">
      <template #prefix>
        <n-icon>
          <search-icon />
        </n-icon>
      </template>
    </n-input>
    <n-button type="primary">搜索</n-button>
  </n-space>
  <n-data-table
    :columns="columns"
    :data="contests"
    :pagination="pagination"
    style="margin-top: 20px; margin-left: 5%; width: 90%;"
  />
</template>

<script lang="ts">
import { defineComponent, h, ref } from "@vue/runtime-core";
import { SearchOutline as SearchIcon } from "@vicons/ionicons5"
import { NTag, NButton } from "naive-ui";
import router from "@/router";
import { useStore } from 'vuex'
import { key } from '@/vuex/index'
import { contest } from '@/models/contests'
import { toGetContests } from "@/utils/contests";

export default defineComponent({
  components: { SearchIcon },
  created(){
    this.setContests();
  },
  setup() {
    const store = useStore(key);

    return {
      contests: ref<contest[]>([
        {
          key: 0,
          contestNo: 1001,
          titleName: '你好世界',
          status: "开放的",
          startTime: "2021-12-9 14:00:00",
          endTime: "2021-12-9 17:00:00",
        }
        ]),
      columns: [
        {
          title: '竞赛编号',
          key: 'contestNo',
          align: 'center',
          render(row: any) {
            const btn = h(NButton, {
              text: true,
              onClick: () => { store.commit('setContestNo', row.contestNo); router.push('/contests/' + row.contestNo) }
            },
              { default: () => row.contestNo })
            return btn;
          }
        },
        {
          title: '竞赛名称',
          key: 'titleName',
          align: 'center',
          render(row: any) {
            const btn = h(NButton, {
              text: true,
              onClick: () => { store.commit('setContestNo', row.contestNo); router.push('/contests/' + row.contestNo) }
            },
              { default: () => row.titleName })
            return btn;
          }
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          render(row: any) {
            const status = h(NTag, {
              type: row.status == "开放的" ? "primary" : "error"
            },
              { default: () => row.status })
            return status;
          }
        },
        {
          title: "开始时间",
          key: 'startTime',
          align: 'center'
        },
        {
          title: '结束时间',
          key: 'endTime',
          align: 'center'
        }
      ],
      pagination: { pageSize: 10 },
    }
  },
  methods: {
    async setContests(){
      console.log('进入函数');
      const data = await toGetContests();
      if (data){
        console.log(data);
        this.contests = data;
      }
    }
  }
})
</script>